<template>
  <div class="home-background">
    <div class="auth-buttons">
      <template v-if="isLoggedIn">
        <router-link to="/user-info" class="auth-button">
          <button>用户信息</button>
        </router-link>
      </template>
      <router-link v-else to="/login" class="auth-button">
        <button>登录</button>
      </router-link>
      <router-link to="/register" class="auth-button">
        <button>注册</button>
      </router-link>
    </div>
    <!-- 搜索框 -->
    <input type="text" v-model="searchQuery" placeholder="搜索商品" @input="searchProducts">
    <!-- 轮播图 -->
    <div class="slider">
      <img src="https://via.placeholder.com/800x300" alt="Slider 1">
      <img src="https://via.placeholder.com/800x300" alt="Slider 2">
      <img src="https://via.placeholder.com/800x300" alt="Slider 3">
    </div>
    <div style="font-size: 20px;font-weight: bold;color:blue">
      欢迎光临吉吉商城
    </div>
    <div class="product-list">
      <div class="product-item" v-for="product in filteredProducts" :key="product.name">
        <img :src="product.image" alt="Product">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
        <button @click="addToCart(product.name)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const searchQuery = ref('')
const products = ref([
  {
    name: '商品 1',
    description: '这是商品 1 的描述。',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '商品 2',
    description: '这是商品 2 的描述：陈安鸿牌杜蕾斯',
    image: 'https://via.placeholder.com/150'
  },
  {
    name: '商品 3',
    description: '这是商品 3 的描述。：陈安鸿牌飞机杯，真是质感，仿真硅胶，男人天堂',
    image: 'https://via.placeholder.com/150'
  }
])

const cart = ref([])
const router = useRouter()
const isLoggedIn = ref(false)

const checkLoginStatus = () => {
  isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true'
}

onMounted(() => {
  checkLoginStatus()
})

const filteredProducts = computed(() => {
  return products.value.filter(product =>
      product.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

const addToCart = (product) => {
  cart.value.push(product)
  console.log('加入购物车:', cart.value)
}

const searchProducts = () => {
  // 这里可以添加更多的搜索逻辑，例如发送请求到后端
}
</script>

<style scoped>
.home-background {
  background-image: url('@/assets/images/780.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;
}

.auth-buttons {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
}

.auth-button button {
  padding: 5px 10px;
}

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
  margin-bottom: 20px;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 200px;
}
</style>